<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<!-- head 头部-->
<head th:replace="admin/layout/include::head('配置管理','')"></head>
<style>
    .layui-form-label{
        width: 100px;
    }
    .layui-input-block {
        margin-left: 130px;
    }
</style>
<body>
<!-- loading 动画-->
<div th:replace="admin/layout/include::loading"></div>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">上传配置</div>
        <div class="layui-card-body" style="min-height: 600px;max-width: 760px;">
            <blockquote class="layui-elem-quote layui-quote-nm">数据无法同步，如果切换了存储方式，请注意数据有效性</blockquote>
            <form class="layui-form model-form"  lay-filter="upload">
                <div class="layui-form-item">
                    <label class="layui-form-label">存储类型：</label>
                    <div class="layui-input-block">
                        <input type="radio" lay-filter="storageType" name="storageType" value="local" title="本地存储" checked>
                        <input type="radio" lay-filter="storageType" name="storageType" value="qiniu" title="七牛云存储">
                        <input type="radio" lay-filter="storageType" name="storageType" value="oss" title="OSS存储">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">uuid重命名</label>
                    <div class="layui-input-block">
                        <input type="checkbox" id="uuidName" name="uuidName" lay-skin="switch" value="1" checked lay-text="开启|禁用">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" lay-tips="上传文件的地址，例如 http://portal.javabb.cn/" lay-direction="2">服务器地址
                        <span class="icon-text"><i class="layui-icon layui-icon-tips"></i></span>
                    </label>
                    <div class="layui-input-block">
                        <input id="serverUrl" name="serverUrl" class="layui-input" type="text" placeholder="输入服务器地址"/>
                    </div>
                </div>

                <div id="uploadTemplate"></div>

                <div class="layui-form-item text-center" style="margin-top: 30px;">
                    <button class="layui-btn layui-btn-primary icon-btn" type="reset">
                        <i class="layui-icon">&#x1006;</i>重置
                    </button>
                    <button class="layui-btn icon-btn" lay-filter="submit" lay-submit>
                        <i class="layui-icon">&#xe605;</i>提交
                    </button>
                </div>
            </form>


        </div>
    </div>
</div>
<script type="text/html" id="local">
    <div class="layui-form-item">
        <label class="layui-form-label" lay-tips="文件存储路径，例如 D:/javabb/upload/，/usr/upload/" lay-direction="2">存储路径
            <span class="icon-text"><i class="layui-icon layui-icon-tips"></i></span>
        </label>
        <div class="layui-input-block">
            <input id="rootPath" name="rootPath"class="layui-input"  type="text" placeholder="输入存储路径"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开启缩略图</label>
        <div class="layui-input-block">
            <input type="checkbox" id="useSm" name="useSm" lay-skin="switch" value="1" checked lay-text="开启|禁用">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开启Nginx</label>
        <div class="layui-input-block">
            <input type="checkbox" id="useNginx" name="useNginx" lay-skin="switch" value="1" checked lay-text="开启|禁用">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" lay-tips="开启Nginx后有效" lay-direction="2">Nginx地址
            <span class="icon-text"><i class="layui-icon layui-icon-tips"></i></span>
        </label>
        <div class="layui-input-block">
            <input name="nginxUrl"class="layui-input" type="text" placeholder="输入Nginx地址"/>
        </div>
    </div>
</script>
<script type="text/html" id="qiniu">
    <div class="layui-form-item">
        <label class="layui-form-label">七牛Bucket</label>
        <div class="layui-input-block">
            <input name="qiniuBucketName"class="layui-input" type="text" placeholder="输入qiniuBucketName"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">七牛AccessKey</label>
        <div class="layui-input-block">
            <input name="qiniuAccessKey"class="layui-input" type="text" placeholder="输入七牛AccessKey"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">七牛Secret Key</label>
        <div class="layui-input-block">
            <input name="qiniuSecretKey"class="layui-input" type="text" placeholder="输入七牛Secret Key"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">七牛云cdn域名</label>
        <div class="layui-input-block">
            <input name="qiniuBasePath"class="layui-input" type="text" placeholder="输入七牛云cdn域名"/>
        </div>
    </div>
</script>
<script type="text/html" id="oss">
    目前不支持
</script>
</body>
<!-- js部分 -->
<div th:replace="admin/layout/include::js"></div>
<script>
    layui.use(['element','form', 'table', 'util', 'admin','fileChoose'], function () {
        var form = layui.form;
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var admin = layui.admin;
        var fileChoose = layui.fileChoose;

        var formUrl;  // 表单提交的action

        var configType = 'upload';
        var configData;
        B.get({
            url:'/admin/config/getConfig',
            data:{configType:configType},
            async: false,
            loading: true,
            success:function (res) {
                if(res.success){
                    configData = res.data;
                }else{

                }
            }
        });
        function submit(data){
            // console.log(data) //当前容器的全部表单字段，名值对形式：{name: value}
            // 表单提交事件
            B.post({
                url: '/admin/config/saveMap',
                loading: true,
                data: data,
                success: function (data) {
                    if (data.success) {
                        layer.msg(data.msg, {icon: 1});
                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }
                }
            });
        }
        form.on('submit(submit)', function(data){
            data.field.configType = configType;
            data.field.uuidName = data.field.uuidName=='1'?'1':'0';
            var uploadType = $("[name=storageType]").val();
            if (uploadType == 'local') {
                data.field.useSm = data.field.useSm=='1'?'1':'0';
                data.field.useNginx = data.field.useNginx=='1'?'1':'0';
            }
            submit(data.field);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        // 类型切换事件
        form.on('radio(storageType)', function (data) {
            changeUploadType(data.value);
        });
        function changeUploadType(value) {

            $('#uploadTemplate').empty();
            if (value == 'local') {
                $('#uploadTemplate').html($('#local').html());
                form.val(configType, configData);
                $('#useSm').prop('checked',configData.useSm=="1"?"checked":"");
                $('#useNginx').prop('checked',configData.useNginx=="1"?"checked":"");
            }else if (value == 'qiniu') {
                $('#uploadTemplate').html($('#qiniu').html());
                form.val(configType, configData);
            }else if (value == 'oss') {
                $('#uploadTemplate').html($('#oss').html())
            }
            $('#uuidName').prop('checked',configData.uuidName=="1"?"checked":"");
            form.val(configType,{"storageType":value}); // 选中当前
            form.render();
        }
        setTimeout(function () {
            changeUploadType(configData.storageType);
        }, 50);
    });

</script>
</html>